<template>
  <fieldset class="tab">
    <legend>动态组件</legend>
    <!-- 绑定一个is属性可以根据下面引入的来改变内容 -->
    <!-- <h1 :is="name">112121</h1> -->
    <!-- 注意这里的类名tab-button在data里面没有定义，是在style直接写的，所以用【】 -->
    <button
      @click="aaa(item)"
      :class="['tab-button', { active:aa == item}]"
      v-for="(item, index) in arr"
      :key="index"
    >
      {{ item }}
    </button>
    <!-- 缓存组件的状态keep-alive -->
    <keep-alive>
      <div class="tab" :is="tab"></div>
    </keep-alive>
  </fieldset>
</template>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: hotpink;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

h1 {
  margin: 0;
}
</style>
<script>
import Email from "./email.vue";
import Paylist from "./paylist.vue";
import Home from "./home.vue";

export default {
  data() {
    return {
      arr: ["Email", "Paylist", "Home"],
      aa: "Email",
    };
  },
  components: {
    Email,
    Paylist,
    Home,
  },
  methods: {
    aaa(item) {
      //   this.aa = this.item;
      //   console.log(aa);
      // console.log(this.aa);
      console.log(item);
      this.aa = item;//每次点击都将aa的值设置为每个点击按钮的值
      console.log(this.aa);
    },
  },
  computed:{
      tab(){
        return this.aa
      }
  }
};
</script>
